<template>
	<!-- 刘亚鹏 2023-4-11 购物车结算商品页面 -->
	<view class="box">
		<!-- <view style="width:100%;height:40px;margin-top:10px;text-align:center;line-height:40px;background:#fff;">
			<u-icon @click="PopUpExitBox" name="arrow-left" size="22px" style="float:left;margin: 10px 0 0 10px;"></u-icon>
			<span style="font-weight: bold;margin-left: -25px;">确认订单</span>
		</view> -->
		<view class="view-box">
				<u-row>
					<u-col span="1">
						<u-icon name='map-fill' size='24' color="#E06181"></u-icon>
					</u-col>
					<u-col span="11">
						<view v-show="addressFLag1">
							<view style="width: 100%;">
								<view style="width:90%;height: 60rpx; float:left;margin-top: 2px;">
									<span>暂未填写收货地址,请去个人中心完善</span>
								</view>
								<view style="width:10%;float:left;">
									<span style="font-size:24px;color:grey;">></span>
								</view>
							</view>
						</view>
						<view v-show="addressFLag" style="width: 100%;height: 140rpx;" @click="selectAddress">
							<view style="width: 90%;float:left;">
								<view style="width:100%;height:50rpx;overflow:hidden;word-break:break-all;">
								{{address.addressLocationProvince}}
								{{address.addressLocationCity}}
								{{address.addressLocationCounty}}
								</view>
								<p style="font-weight: bold;font-size: 18px;">{{address.addressDetailed}}</p>
								<view class="text-dark">
									{{address.addressConsignee}}
									{{address.addressTelephoneShift}}
								</view>
							</view>
<!-- 							<view style="width: 8%;float:left;">
								<u-icon @click="toAddressPage" customStyle="font-size:20px;position: relative;top:30px;" name="arrow-right"></u-icon>
							</view> -->
						</view>
					</u-col>
				</u-row>
		</view>
		<view class="view-box">
			<u-row justify="space-between" gutter="10">
				<u-col span="3.5"  v-if="index <  2" v-for="(item,index) in commodityData" :key="index" >
					<u--image :showLoading="true"
					:src="'http://101.43.223.224:8765/image/getImageById?id='+(item.imgId==null?'':item.imgId.split(',')[0])"
					 width="100px" height="100px" style="float: left;" @click="click"></u--image>
				</u-col>
				<u-col span="3.5"  v-if="index <  1" v-for="(item,index) in commodityDiyData" :key="index" >
					<u--image :showLoading="true"
					:src="'http://101.43.223.224:8765/image/getImageById?id='+(item.diyImageId==null?'':item.diyImageId.split(',')[0])"
					 width="100px" height="100px" style="float: left;" @click="click"></u--image>
				</u-col>
				<u-col span="6.5">
				 <span @click="viewProductDetails">共{{commSum}}件></span>
				</u-col>
				<u-col span="2">
					<!-- <p class="text-title">
						<span class="left">{{commodityData.commodityName}}</span>
						<span class="right" style="color:#E06181">￥{{commodityData.price}}</span>
					</p> -->
					<p class="text-light">{{spec}}</p>
					<p class="text-light">
						<span class="text-light" v-for="service in serviceList">
							<u-tag :text="service" plain size="mini" type="warning" class="tag-box"></u-tag>
						</span>
					</p>
					<!-- <p>
						<u-number-box
							button-size="24"
							color="#3CCCA6"
							bgColor="#f5f5f5"
							iconStyle="color: #3CCCA6"
							integer
							v-model="number"
							class="right"
							style="margin-top: 6px;"
						></u-number-box>
					</p> -->
				</u-col>
			</u-row>
		</view>
		<!-- 价格明细 -->
		<view class="view-box">
			<p class="text-title">价格明细</p>
			<p>
				<span class="text-dark ">商品数量：</span>
				<span class="text-dark right" style="font-size:20px">X{{commSum}}</span>
			</p>
			<p>
				<span class="text-dark ">合计：</span>
				<span class="text-dark right" style="font-size:20px">
					￥{{totalCommodityDiyPrice}}
				</span>
			</p>
			<p>
				<span class="text-dark ">优惠券：</span>
				<span @click="openCouponPopup" class="text-dark right" style="font-size:20px">></span>
			</p>
		</view>
		<view class="view-box">
			<u-radio-group
			v-model="payRadio"
			placement="column"
			@change="groupChange"
			>
				<u-radio
				:customStyle="{marginBottom: '8px'}"
				:key="2"
				:label="2"
				:name="2"
				@change="radioChange"
				>
					<u-icon name="weixin-circle-fill" size="24" color="#01C705" style="margin:0 6px"></u-icon>
					微信支付（推荐）
				</u-radio>
				<u-radio
				:customStyle="{marginBottom: '8px'}"
				:key="1"
				:label="1"
				:name="1"
				@change="radioChange"
				>
					<u-icon name="zhifubao-circle-fill" size="24" color="#0E78FF" style="margin:0 6px"></u-icon>
					支付宝支付
				</u-radio>
			</u-radio-group>
		</view>
		<view class="bottom-nav">
			<span style="color: #E06181;font-size:20px;float: left;">
				合计：￥{{totalCommodityDiyPrice}}
			</span>
			<u-button class="right" customStyle="width:120px;margin-top:10px;margin-right:5%;background-color:#e09397;float: right;" shape="circle" @click="submitOrder"><i style="color: #fff;">提交订单</i></u-button>
		</view>
		<!-- 退出弹窗 -->
		<view>
			<u-modal :showConfirmButton="false" :show="exitPopup" width="260px">
				<view style="text-align:center;margin-bottom:20px;">
					确认放弃付款嘛?
				</view>
				<view style="margin-bottom:20px;">
					<u-button @click="confirmPayment" style="background:#FF4444;color: #fff;border:none;" text="继续支付"></u-button>
				</view>
				<view>
					<u-button @click="giveUpTemporarily" style="color:grey;border:none;background:#fff;" text="暂时放弃"></u-button>
				</view>
			</u-modal>
		</view>
		<u-popup :closeable="true" :show="show" mode="bottom":round="20" @close="close">
			<view style="width: 100%;background:#F7F8FA;border-radius: 10px;">
				<view style="width: 100%;height: 50px;line-height: 50px;">
					<span style="margin-left: 15px">优惠券</span>
				</view>
				<view style="width: 100%;height: 310px;background: palegoldenrod;">
					<view style="width:100%;height: 30px;line-height:30px;">
						<view @click="availableCoupon" class="available">
							可用优惠券
						</view>
						<view @click="unavailableCoupon" class="unavailable">
							不可用优惠券
						</view>
					</view>
					<view v-show="available" style="width:100%;height: 50px;background:palegreen;margin-top:10px;">
						<view style="width:100%;margin-left:15px;">
							1111
						</view>
					</view>
					<view v-show="unavailable" style="width:100%;height: 50px;background:palegreen;margin-top:10px;">
						<view style="width:100%;margin-left:15px;">
							2222
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 点击共几件弹出 商品信息 -->
		<view style="height: 10%;width: 100%;position: absolute;left: 0;top: 0;">
		<u-popup :show="howManyPiecesshow" :round="10" mode="bottom" @close="close" @open="open">
				<view style="height: 1200rpx;overflow-y: scroll">
				   <view style="width: 100%;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);border-radius: 10px;margin-bottom: 40rpx;float: left;" v-for="(item,index) in commodityData" :key="index">
				   	<view>
				   		<view style="width: 100%;height: 20px;">
							<!-- gray -->
				   			<view style="font-weight: bold;color: gray;padding: 10px; ">{{item.businessName}} ></view>
				   		</view>
				   		<view style="width: 100%;background-color: #fff;">
				   			<view style="float: left;width: 28%;margin: 6% 0 0 5%;">
				   					<image :src="'http://101.43.223.224:8765/image/getImageById?id='+ (item.imgId==null?'':item.imgId.split(',')[0])" style="width: 150rpx;height: 160rpx;border-radius: 10px;"></image>
				   			</view>
				   			<view style="width: 66%;float: left;padding: 20px 0 20px 0;" class="size">
				   				<view style="font-size: 30rpx;margin-bottom: 4%;">{{item.commName}}</view>
				   				<view class="" style="width: 100%;">
				   					<span style="font-size: 10px;">{{item.back}}</span>
				   				</view>
				   				<view style="margin-top: 6%">
				   					<view style="width: 70%;float: left;" class="goods-price"><span style="color: red;font-size: 34rpx;">￥{{item.favPrice}}</span></view>
				   				</view>
				   			</view>
				   		</view>
				   	</view>
				   </view>
				   <!-- diy展示 -->
				   <view style="width: 100%;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);border-radius: 10px;margin-bottom: 40rpx;float: left;" v-for="(item,index) in commodityDiyData" :key="index">
				   	<view>
				   		<view style="width: 100%;height: 20px;">
				   			<view style="font-weight: bold;color: gray;padding: 10px;">{{item.businessName}}DIY ></view>
						</view>
				   		<view style="width: 100%;background-color: #fff;">
				   			<view style="float: left;width: 28%;margin: 6% 0 0 5%;">
				   					<image :src="'http://101.43.223.224:8765/image/getImageById?id='+ (item.diyImageId==null?'':item.diyImageId.split(',')[0])" style="width: 150rpx;height: 160rpx;border-radius: 10px;"></image>
				   			</view>
				   			<view style="width: 66%;float: left;padding: 20px 0 20px 0;" class="size">
				   				<view style="font-size: 30rpx;margin-bottom: 4%;">{{item.diyName}}</view>
				   				<!-- <view class="" style="width: 100%;">
				   					<span style="font-size: 10px;">{{item.back}}</span>
				   				</view> -->
				   				<view style="margin-top: 6%">
				   					<view style="width: 70%;float: left;" class="goods-price"><span style="color: red;font-size: 34rpx;">￥{{item.diyFavorablePrice}}</span></view>
				   				</view>
				   			</view>
				   		</view>
				   	</view>
				   </view>
				   
				   	<view style="text-align: center;margin-bottom: 20rpx;">
				   		—— 真的到底了 ——
				   	</view>
			</view>
		</u-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//订单信息
				commodityInfo:{},
				//收货地址
				address:{},
				//商品信息
				commodityData:[],
				//diy信息
				commodityDiyData:[],
				//地址id
				addressId:0,
				//商品id
				commodityId:0,
				//服务列表
				serviceList:[],
				//数量
				number:1,
				//优惠券
				discountCoupon:0,
				//支付方法
				payRadio:2,
				// 判断弹出退出弹窗
				exitPopup: false,
				id: '',
				// 判断是否打开优惠券弹窗
				show: false,
				// 优惠券内控制显隐
				available: true,
				// 优惠券内控制显隐 
				unavailable: false,
				spec:'',
				// 商品数量
				commNum:0,
				// 商品diy数量
				commSum:0,
				// 控制地址是否显示变量
				addressFLag:true,
				// 控制地址是否显示变量
				addressFLag1:true,
				// 商品总价钱
				totalCommodityPrice:0,
				// diy商品总价钱
				totalCommodityDiyPrice:0,
				// 共几件弹出层控制显隐变量
				howManyPiecesshow:false,
				// 用户信息对象
				userInfo:{},
			}
		},
		onLoad(option){
			// this.id = option.id
			// const commodityInfo = JSON.parse(decodeURIComponent(option.commodityInfo))
			// this.commodityInfo = commodityInfo
			// this.addressId = commodityInfo.addressId
			// this.userId = commodityInfo.userId
			// this.commodityId = commodityInfo.commodityId
			// this.spec = commodityInfo.commoditySpec
			// this.serviceList = commodityInfo.serviceList
			// this.number = commodityInfo.number
			this.getUserInfo()
			// 查询地址信息
			this.getAddressById()
			// 商品商品信息
			this.getCommodityById()
			this.selectUserCoupon()
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				this.userInfo = wx.getStorageSync('user')
			},
			// 根据用户id查询用户可用的优惠券
			selectUserCoupon(){
				this.$myRequest({
					url: '/newDaily/selectUserCoupon',
					data: {
						userId : this.userId
					}
				}).then(res => {
						this.discountCoupon = res.data.data
				})
			},
			// 打开优惠券弹窗
			openCouponPopup(){
				this.show = true
			},
			//根据id查询地址
			getAddressById(){
				this.$myRequest({
					url: '/AppletShoppingCart/getUserAddress',
					data: {
						userId: this.userInfo.id
					}
				}).then(res => {
					if(res.data.flag){
						this.address = res.data.data
						if(this.address !== null){
							this.addressFLag = true
							this.addressFLag1 = false
						}else{
							this.addressFLag = false
							this.addressFLag1 = true
						}
					}else{
						this.addressFLag = false
						this.addressFLag1 = true
					}
				})
			},
			//查询商品信息
			getCommodityById() {
				this.$myRequest({
					url: '/AppletShoppingCart/getShoppingCartInfo',
					data: {
						userId: this.userInfo.id
					}
				}).then(res => {
					if(res.data.flag){
						this.commodityData = res.data.data
							let lastItem = this.commodityData.slice(-1)[0];
							this.totalCommodityPrice = lastItem.shoppingPriceSum;
							this.commNum = this.commodityData.length
						// 查询diy信息
						this.getDiyInfo()
					}else{
						console.log('查询失败')
					}
					// this.imgList=[]
					// this.imgDetailList=[]
					// var imgIds = this.commodityData.imageId.split(',')
					// for (var i = 0; i < imgIds.length; i++) {
					// 	this.imgList.push('http://101.43.223.224:8765/image/getImageById?id='+imgIds[i])
					// }
					// var imgDetailIds = this.commodityData.imageViewId.split(',')
					// for (var i = 0; i < imgDetailIds.length; i++) {
					// 	this.imgDetailList.push('http://101.43.223.224:8765/image/getImageById?id='+imgDetailIds[i])
					// }//骨架框
					// this.lodingFlag = false
				})
			},
			//查询diy信息
			getDiyInfo(){
				this.$myRequest({
					url:'/AppletShoppingCart/getShoppingCartInfoDiy',
					data:{userId:this.userInfo.id}
				}).then(res =>{
					if(res.data.flag){
						this.commodityDiyData = res.data.data
							// 计算商品diy总数量
							this.commSum = this.commNum + this.commodityDiyData.length
							// 计算商品diy总价钱
							let lastItem = this.commodityDiyData.slice(-1)[0];
							if(lastItem !== undefined){
								this.totalCommodityDiyPrice = this.totalCommodityPrice + lastItem.shoppingDiyPriceSum
							}else{
								this.totalCommodityDiyPrice = this.totalCommodityPrice
							}
					}else{
						console.log('查询失败')
					}
				})
			},
			// 点击暂时放弃跳转到上一级页面
			giveUpTemporarily(){
				this.backPage()
				// uni.navigateTo({
				// 	//保留当前页面，跳转到应用内的某个页面
				// 	url: '/pages/shoppingtrolley/ShoppingTrolley'
				// })
			},
			// 提交订单
			submitOrder(){
				// this.commodityData.totalPrice = this.commodityData.shoppingPriceSum
				// console.log('aaaa' + JSON.stringify(this.commodityData))
				// this.$myRequest({
				// 	method:'POST',
				// 	url:'/order/submitOrder',
				// 	data:{
				// 		commodityArr:JSON.stringify(this.commodityData),
				// 		diyArr:JSON.stringify(this.commodityDiyData),
				// 		orderAmountTotal:this.totalCommodityDiyPrice,
				// 		userId:this.userInfo.id,
				// 		payModeId: this.payRadio,
				// 		AddressId:this.address,
				// 		Freight:0
				// 	}
				// }).then(res =>{
				// 	if(res.data.flag){
				// 		console.log('success')
				// 	}
				// })
			},
			//返回上一页
			backPage(){
				//获取所有页面栈实例列表
				let pages = getCurrentPages(); 
				//当前页页面实例
				let nowPage = pages[pages.length - 1]; 
				//上一页页面实例
				let prevPage = pages[pages.length - 2]; 
				//修改上一页data里面的地址
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
					success:(event)=>{
					}
				})
			},
			// 点击确认支付退出弹窗关闭
			confirmPayment(){
				this.exitPopup = false
			},
			// 点击返回按钮弹出退出弹窗
			PopUpExitBox(){
				this.exitPopup = true
			},
			//跳转至收货地址页面
			toAddressPage(){
			},
			// 关闭优惠券弹窗方法
			close() {
				this.show = false
			},
			availableCoupon(){
				this.available = true
				this.unavailable = false
			},
			unavailableCoupon(){
				this.available = false
				this.unavailable = true
			},
			// 查看有几件商品
			viewProductDetails(){
				this.howManyPiecesshow = true
			},
			// 共几件打开事件
			open() {
			    // console.log('open');
				this.howManyPiecesshow = true
			},
			// 共几件关闭事件
			close() {
				this.howManyPiecesshow = false
				// console.log('close');
			},
			groupChange(){
			}
		},
	}
</script>
<style lang="scss" scoped>
	.available{
		width:50%;
		float:left;
		text-align:center;
	}
	.unavailable{
		width:50%;
		float:left;
		text-align:center;
	}
	/**
	 * 公共样式 ↓
	 */
	.left{
		float:left
	}
	.right{
		float:right
	}
	.text-title {
		//文字标题样式
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 14px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 14px;
		color: #999999;
	}

	.text-center {
		//居中文字样式
		text-align: center;
	}
	.tag-box{
		width:72px;
		float:left;
		text-align:center;
		margin-right:4px;
	}
	.view-box {
		line-height: 28px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}
	/**
	 * 公共样式 ↑
	 */
	.box{
		width: 96%;
		margin-left: 2%;
		background: #f5f5f5;
	}
	
	.bottom-nav {
		width: 100%;
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		color: #ffffff;
		background: #ffffff;
		position: fixed;
		bottom: 0
	}
	.bottom-nav .right{
		margin: 0 4px;
	}
	/deep/.u-modal__content[data-v-0156a215] {
	  padding: 12px 25px 25px 25px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}
	/deep/.u-button--info[data-v-2bf0e569] {
	    /* background-color: #FF4444; */
	    /* border-color: #ebedf0; */
			border-radius: 20px;
	}
</style>